document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const tabItems = document.querySelectorAll('.tab-item');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const forms = document.querySelectorAll('form');

    // 表单验证规则
    const validationRules = {
        username: {
            pattern: /^[a-zA-Z0-9_-]{3,16}$/,
            message: '用户名长度3-16位，只能包含字母、数字、下划线'
        },
        email: {
            pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: '请输入有效的邮箱地址'
        },
        password: {
            pattern: /^.{6,}$/,
            message: '密码长度至少6位'
        }
    };

    // 切换登录/注册表单
    tabItems.forEach(tab => {
        tab.addEventListener('click', () => {
            // 移除所有active类
            tabItems.forEach(t => t.classList.remove('active'));
            // 添加active类到当前tab
            tab.classList.add('active');
            
            // 切换表单显示
            if (tab.textContent === '登录') {
                loginForm.style.display = 'block';
                registerForm.style.display = 'none';
            } else {
                loginForm.style.display = 'none';
                registerForm.style.display = 'block';
            }
        });
    });

    // 表单验证函数
    function validateInput(input) {
        const formGroup = input.closest('.form-group');
        const errorMessage = formGroup.querySelector('.error-message');
        let isValid = true;

        // 检查必填
        if (input.hasAttribute('required') && !input.value.trim()) {
            formGroup.classList.add('error');
            errorMessage.textContent = `请输入${input.placeholder}`;
            isValid = false;
        }
        // 检查邮箱
        else if (input.type === 'email' && !validationRules.email.pattern.test(input.value)) {
            formGroup.classList.add('error');
            errorMessage.textContent = validationRules.email.message;
            isValid = false;
        }
        // 检查密码
        else if (input.type === 'password' && !validationRules.password.pattern.test(input.value)) {
            formGroup.classList.add('error');
            errorMessage.textContent = validationRules.password.message;
            isValid = false;
        }
        // 检查确认密码
        else if (input.placeholder === '确认密码') {
            const password = input.closest('form').querySelector('input[placeholder="密码"]');
            if (input.value !== password.value) {
                formGroup.classList.add('error');
                errorMessage.textContent = '两次输入的密码不一致';
                isValid = false;
            }
        }

        if (isValid) {
            formGroup.classList.remove('error');
        }

        return isValid;
    }

    // 添加实时验证
    forms.forEach(form => {
        const inputs = form.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                validateInput(input);
            });

            input.addEventListener('blur', () => {
                validateInput(input);
            });
        });
    });

    // 处理表单提交
    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const inputs = loginForm.querySelectorAll('input');
        let isValid = true;

        inputs.forEach(input => {
            if (!validateInput(input)) {
                isValid = false;
            }
        });

        if (isValid) {
            // TODO: 处理登录逻辑
            console.log('登录表单提交');
        }
    });

    registerForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const inputs = registerForm.querySelectorAll('input');
        let isValid = true;

        inputs.forEach(input => {
            if (!validateInput(input)) {
                isValid = false;
            }
        });

        if (isValid) {
            // TODO: 处理注册逻辑
            console.log('注册表单提交');
        }
    });

    // 处理社交登录
    const socialIcons = document.querySelectorAll('.social-icon');
    socialIcons.forEach(icon => {
        icon.addEventListener('click', () => {
            const provider = icon.classList[1]; // wechat, qq, or weibo
            // TODO: 处理社交登录逻辑
            console.log(`使用 ${provider} 登录`);
        });
    });
}); 